import { ComponentType } from 'react'
import Taro, { PureComponent, Config, useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtSegmentedControl, AtTabBar } from 'taro-ui'
import { observer, inject } from '@tarojs/mobx'
import Scan from '../../assets/icons/saoma.svg'
import IndexPage from '../../assets/icons/yemian-copy-copy.svg'
import Me from '../../assets/icons/Icon_wodeB.svg'

import './index.scss'

type PageStateProps = {
  indexStore: {
    scanUrl: string,
    scanCode: Function
  }
  listStore: {
    rows: Array<any>,
    getDataList: Function,
    clear: Function,
  }
}

interface Index {
  props: PageStateProps;
}


@inject('indexStore', 'listStore')
@observer
class Index extends PureComponent {
  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '列表'
  }

  componentWillMount() {
    this.props.listStore.getDataList()
  }

  componentWillUnmount() {
    this.props.listStore.clear()
  }

  onTrClick(id) {
    // this.props.indexStore.scanUrl = `https://project.weitip.com/index/project/info/id/${id}`
    // Taro.navigateTo({ url: '/pages/input/index' })
  }

  render() {
    const { listStore, indexStore } = this.props
    const { rows } = listStore
    const [current, setCurrent] = useState(0)
    const flag = rows.length > 0
    return (
      <View className='wrapper'>
        <AtSegmentedControl
          values={['问题整理列表', '问题整改信息填写']}
          onClick={async (value) => {
            if (value === current) return
            await listStore.getDataList(value)
            setCurrent(value)
          }}
          current={current}
        />
        {
          current === 0 && (
            <View className='table-wrap'>
              <View className='table-head'>
                <View className='table-th'>问题描述</View>
                <View className='table-th'>责任人</View>
                <View className='table-th'>曝光时间</View>
                <View className='table-th'>问题状态</View>
              </View>
              <View className='table-body'>
                {
                  flag ? rows.map(item => {
                    const { id, name, user_name, construction_unit, bearing_load, status } = item
                    return (
                      <View className='table-tr' key={id} onClick={this.onTrClick.bind(this, id)}>
                        <View className='table-td'>{decodeURIComponent(name)}</View>
                        <View className='table-td'>{decodeURIComponent(current === 0 ? construction_unit : user_name)}</View>
                        <View className='table-td'>{bearing_load}</View>
                        <View className='table-td'>{status === 0 ? '待验收' : (status === 1 ? '合格' : '不合格')}</View>
                      </View>
                    )
                  }) : (
                    <View className={`empty-data ${rows.length === 0 ? 'show' : ''}`}>
                      <Text>还没有数据</Text>
                    </View>
                  )
                }
              </View>
            </View>
          )
        }
        {
          current === 1 && (
            <View>
              表单
            </View>
          )
        }
        <AtTabBar
          fixed
          tabList={[
            { title: '首页', image: IndexPage },
            { title: '扫码', image: Scan },
            { title: '我的', image: Me }
          ]}
          onClick={(value) => {
            if (value === 0) {
              try {
                Taro.navigateBack()
              } catch (e) {
                Taro.redirectTo({ url: 'pages/index/index' })
              }
            }
            if (value === 1) {
              indexStore.scanCode()
              return
            }
          }}
          current={-1}
        />
      </View>
    )
  }
}

export default Index  as ComponentType
